import 'dart:math';

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:getwidget/getwidget.dart';
import 'package:meal/constant/sizes.dart';
import 'package:meal/route/route.dart';
import 'package:meal/utils/colors.dart';
import 'package:meal/utils/styles.dart';
import 'package:meal/utils/tools.dart';

class WithdrawalAdd extends StatefulWidget {
  const WithdrawalAdd({Key? key}) : super(key: key);

  @override
  State<WithdrawalAdd> createState() => _WithdrawalAddState();
}

class _WithdrawalAddState extends State<WithdrawalAdd> {
  String money = '';

  String pwd = '';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: ToolsUtils.getDefaultBackgroundColor(),
      appBar: ToolsUtils.getDefaultBrnAppBar(
        '提现',
        actions: ToolsUtils.actions('提现记录', pressed: () {
          Get.toNamed(RouteGet.financeWithdrawalRecord);
        }),
      ),
      body: SingleChildScrollView(
        padding: const EdgeInsets.only(
            top: Sizes.default10, left: Sizes.default15, right: Sizes.default15),
        child: Column(
          children: [
            Container(
              decoration: BoxDecoration(
                  color: Colors.white, borderRadius: BorderRadius.circular(Sizes.default10)),
              child: ListBody(
                children: [
                  Container(
                    height: Sizes.default50,
                    padding: const EdgeInsets.symmetric(horizontal: Sizes.default20),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Text(
                          '提现方式',
                          style: StylesUtils.customTextStyle(
                              color: ColorsUtils.color333, fontSize: Sizes.default15),
                        ),
                        Text(
                          '银行卡提现',
                          style: StylesUtils.customTextStyle(
                              color: ColorsUtils.color797, fontSize: Sizes.default15),
                        )
                      ],
                    ),
                  ),
                  Container(
                    height: Sizes.default50,
                    padding: const EdgeInsets.symmetric(horizontal: Sizes.default20),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Text(
                          '到账银行卡',
                          style: StylesUtils.customTextStyle(
                              color: ColorsUtils.color333, fontSize: Sizes.default15),
                        ),
                        Text(
                          '工商银行（0235）',
                          style: StylesUtils.customTextStyle(
                              color: ColorsUtils.color797, fontSize: Sizes.default15),
                        )
                      ],
                    ),
                  ),
                ],
              ),
            ),
            Container(
              margin: const EdgeInsets.only(top: Sizes.default20),
              decoration: BoxDecoration(
                  color: Colors.white, borderRadius: BorderRadius.circular(Sizes.default10)),
              child: ListBody(
                children: [
                  Container(
                    height: Sizes.default50,
                    padding: const EdgeInsets.symmetric(horizontal: Sizes.default20),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Text(
                          '提现方式',
                          style: StylesUtils.customTextStyle(
                              color: ColorsUtils.color333, fontSize: Sizes.default15),
                        ),
                        Text(
                          '银行卡提现',
                          style: StylesUtils.customTextStyle(
                              color: ColorsUtils.color797, fontSize: Sizes.default15),
                        )
                      ],
                    ),
                  ),
                  Container(
                    height: Sizes.default50,
                    padding: const EdgeInsets.symmetric(horizontal: Sizes.default20),
                    alignment: Alignment.centerLeft,
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Text(
                          '￥',
                          style: StylesUtils.customTextStyle(
                              color: ColorsUtils.color515, fontSize: Sizes.default28),
                        ),
                        Expanded(
                            child: Container(
                          padding: const EdgeInsets.symmetric(horizontal: Sizes.default10),
                          child: TextField(
                            style: StylesUtils.customTextStyle(
                                color: ColorsUtils.color000, fontSize: Sizes.default20),
                            decoration: InputDecoration(
                                border: const OutlineInputBorder(
                                  borderSide: BorderSide.none,
                                ),
                                isCollapsed: true,
                                filled: true,
                                fillColor: Colors.transparent,
                                contentPadding: const EdgeInsets.symmetric(
                                    horizontal: Sizes.default10, vertical: Sizes.default10),
                                constraints: const BoxConstraints(minHeight: Sizes.default40),
                                hintText: '请输入金额',
                                hintStyle: StylesUtils.customTextStyle(
                                    fontSize: Sizes.default16, color: ColorsUtils.colorCcc)),
                            keyboardType: TextInputType.number,
                            onChanged: (String content) {
                              setState(() {
                                money = content;
                              });
                            },
                          ),
                        )),
                        TextButton(
                            onPressed: () {},
                            child: Text(
                              '全部',
                              style: StylesUtils.customTextStyle(color: ColorsUtils.color006),
                            ))
                      ],
                    ),
                  ),
                  if (money.isNotEmpty)
                    Container(
                      height: Sizes.default30,
                      padding: const EdgeInsets.symmetric(horizontal: Sizes.default20),
                      alignment: Alignment.centerLeft,
                      child: Text(
                        '手续费 ￥10',
                        style: StylesUtils.customTextStyle(
                            fontSize: Sizes.default12, color: ColorsUtils.colorFf0),
                      ),
                    ),
                  Container(
                    height: Sizes.default50,
                    padding: const EdgeInsets.symmetric(horizontal: Sizes.default20),
                    alignment: Alignment.centerLeft,
                    child: Text(
                      '账户余额 ￥14.59',
                      style: StylesUtils.customTextStyle(color: ColorsUtils.color999),
                    ),
                  )
                ],
              ),
            ),
            Container(
              margin: const EdgeInsets.only(top: Sizes.default20),
              child: Text(
                '单笔最小限额￥10，单笔最大限额￥4000，每日限额￥5000',
                style: StylesUtils.customTextStyle(
                    fontSize: Sizes.default13, color: ColorsUtils.color797, lineHeight: 1.5),
              ),
            ),
            Container(
              margin: const EdgeInsets.only(top: Sizes.default20),
              child: FractionallySizedBox(
                widthFactor: 1.0,
                child: GFButton(
                    onPressed: () {
                      openAlert();
                    },
                    text: '提现',
                    textStyle: StylesUtils.customTextStyle(fontSize: Sizes.default16),
                    shape: GFButtonShape.pills,
                    type: GFButtonType.solid,
                    size: GFSize.LARGE,
                    color: ColorsUtils.parseColorFromHexString(ColorsUtils.colorFf6)),
              ),
            )
          ],
        ),
      ),
    );
  }

  void openAlert() {
    showDialog(
      context: context,
      barrierColor: Colors.black54,
      builder: (BuildContext context) {
        return StatefulBuilder(
          builder: (BuildContext context, setState) {
            return Material(
              color: Colors.transparent,
              child: Align(
                alignment: Alignment.bottomCenter,
                child: Container(
                  height: 350,
                  decoration: const BoxDecoration(
                      color: Colors.white,
                      borderRadius: BorderRadius.only(
                          topLeft: Radius.circular(Sizes.default15),
                          topRight: Radius.circular(Sizes.default15))),
                  child: Column(
                    children: [
                      Stack(
                        children: [
                          Container(
                            height: Sizes.default50,
                            alignment: Alignment.center,
                            child: Text(
                              '请输入交易密码',
                              style: StylesUtils.customTextStyle(
                                  fontSize: Sizes.default16, color: ColorsUtils.color333),
                            ),
                          ),
                          Positioned(
                              top: 0,
                              right: Sizes.default30,
                              bottom: 0,
                              child: Center(
                                  child: IconButton(
                                      onPressed: () {
                                        Navigator.of(context).pop();
                                      },
                                      icon: Icon(
                                        Icons.close,
                                        color: ColorsUtils.parseColorFromHexString(
                                            ColorsUtils.color000),
                                        size: Sizes.default20,
                                      ))))
                        ],
                      ),
                      Container(
                        height: Sizes.default50,
                        width: double.maxFinite,
                        padding: const EdgeInsets.symmetric(horizontal: Sizes.default15),
                        child: CustomPaint(
                          painter: MyCustom(pwdLength: pwd),
                        ),
                      ),
                      Container(
                        height: Sizes.default50,
                        alignment: Alignment.centerRight,
                        padding: const EdgeInsets.only(right: Sizes.default20),
                        child: TextButton(
                            onPressed: () {
                              Navigator.of(context).pop();
                              Get.toNamed(RouteGet.userTradeForgetPassword);
                            },
                            child: Text(
                              '忘记密码？',
                              style: StylesUtils.customTextStyle(
                                  color: ColorsUtils.color006, fontSize: Sizes.default13),
                            )),
                      ),
                      Container(
                        height: Sizes.default50,
                        decoration: BoxDecoration(
                            border: Border(
                                top: BorderSide(
                                    color: ColorsUtils.parseColorFromHexString('#D7D7D7')))),
                        child: Row(
                          children: [
                            Expanded(
                                child: Center(
                              child: TextButton(
                                  onPressed: () {
                                    setState(() {
                                      changePwd('1');
                                    });
                                  },
                                  child: Text(
                                    '1',
                                    style: StylesUtils.customTextStyle(
                                        color: ColorsUtils.color333, fontSize: Sizes.default25),
                                  )),
                            )),
                            Expanded(
                                child: Container(
                              decoration: BoxDecoration(
                                  border: Border(
                                      left: BorderSide(
                                          color: ColorsUtils.parseColorFromHexString('#D7D7D7')),
                                      right: BorderSide(
                                          color: ColorsUtils.parseColorFromHexString('#D7D7D7')))),
                              child: TextButton(
                                  onPressed: () {
                                    setState(() {
                                      changePwd('2');
                                    });
                                  },
                                  child: Text(
                                    '2',
                                    style: StylesUtils.customTextStyle(
                                        color: ColorsUtils.color333, fontSize: Sizes.default25),
                                  )),
                            )),
                            Expanded(
                                child: Center(
                              child: TextButton(
                                  onPressed: () {
                                    setState(() {
                                      changePwd('3');
                                    });
                                  },
                                  child: Text(
                                    '3',
                                    style: StylesUtils.customTextStyle(
                                        color: ColorsUtils.color333, fontSize: Sizes.default25),
                                  )),
                            )),
                          ],
                        ),
                      ),
                      Container(
                        height: Sizes.default50,
                        decoration: BoxDecoration(
                            border: Border(
                                top: BorderSide(
                                    color: ColorsUtils.parseColorFromHexString('#D7D7D7')))),
                        child: Row(
                          children: [
                            Expanded(
                                child: Center(
                              child: TextButton(
                                  onPressed: () {
                                    setState(() {
                                      changePwd('4');
                                    });
                                  },
                                  child: Text(
                                    '4',
                                    style: StylesUtils.customTextStyle(
                                        color: ColorsUtils.color333, fontSize: Sizes.default25),
                                  )),
                            )),
                            Expanded(
                                child: Container(
                              decoration: BoxDecoration(
                                  border: Border(
                                      left: BorderSide(
                                          color: ColorsUtils.parseColorFromHexString('#D7D7D7')),
                                      right: BorderSide(
                                          color: ColorsUtils.parseColorFromHexString('#D7D7D7')))),
                              child: TextButton(
                                  onPressed: () {
                                    setState(() {
                                      changePwd('5');
                                    });
                                  },
                                  child: Text(
                                    '5',
                                    style: StylesUtils.customTextStyle(
                                        color: ColorsUtils.color333, fontSize: Sizes.default25),
                                  )),
                            )),
                            Expanded(
                                child: Center(
                              child: TextButton(
                                  onPressed: () {
                                    setState(() {
                                      changePwd('6');
                                    });
                                  },
                                  child: Text(
                                    '6',
                                    style: StylesUtils.customTextStyle(
                                        color: ColorsUtils.color333, fontSize: Sizes.default25),
                                  )),
                            )),
                          ],
                        ),
                      ),
                      Container(
                        height: Sizes.default50,
                        decoration: BoxDecoration(
                            border: Border(
                                top: BorderSide(
                                    color: ColorsUtils.parseColorFromHexString('#D7D7D7')))),
                        child: Row(
                          children: [
                            Expanded(
                                child: Center(
                              child: TextButton(
                                  onPressed: () {
                                    setState(() {
                                      changePwd('7');
                                    });
                                  },
                                  child: Text(
                                    '7',
                                    style: StylesUtils.customTextStyle(
                                        color: ColorsUtils.color333, fontSize: Sizes.default25),
                                  )),
                            )),
                            Expanded(
                                child: Container(
                              decoration: BoxDecoration(
                                  border: Border(
                                      left: BorderSide(
                                          color: ColorsUtils.parseColorFromHexString('#D7D7D7')),
                                      right: BorderSide(
                                          color: ColorsUtils.parseColorFromHexString('#D7D7D7')))),
                              child: TextButton(
                                  onPressed: () {
                                    setState(() {
                                      changePwd('8');
                                    });
                                  },
                                  child: Text(
                                    '8',
                                    style: StylesUtils.customTextStyle(
                                        color: ColorsUtils.color333, fontSize: Sizes.default25),
                                  )),
                            )),
                            Expanded(
                                child: Center(
                              child: TextButton(
                                  onPressed: () {
                                    setState(() {
                                      changePwd('9');
                                    });
                                  },
                                  child: Text(
                                    '9',
                                    style: StylesUtils.customTextStyle(
                                        color: ColorsUtils.color333, fontSize: Sizes.default25),
                                  )),
                            )),
                          ],
                        ),
                      ),
                      Container(
                        height: Sizes.default50,
                        decoration: BoxDecoration(
                            border: Border(
                                top: BorderSide(
                                    color: ColorsUtils.parseColorFromHexString('#D7D7D7')))),
                        child: Row(
                          children: [
                            Expanded(
                                child: Center(
                              child: TextButton(
                                  onPressed: () {},
                                  child: Text(
                                    '',
                                    style: StylesUtils.customTextStyle(
                                        color: ColorsUtils.color333, fontSize: Sizes.default25),
                                  )),
                            )),
                            Expanded(
                                child: Container(
                              decoration: BoxDecoration(
                                  border: Border(
                                      left: BorderSide(
                                          color: ColorsUtils.parseColorFromHexString('#D7D7D7')),
                                      right: BorderSide(
                                          color: ColorsUtils.parseColorFromHexString('#D7D7D7')))),
                              child: TextButton(
                                  onPressed: () {
                                    setState(() {
                                      changePwd('0');
                                    });
                                  },
                                  child: Text(
                                    '0',
                                    style: StylesUtils.customTextStyle(
                                        color: ColorsUtils.color333, fontSize: Sizes.default25),
                                  )),
                            )),
                            Expanded(
                                child: Center(
                              child: TextButton(
                                  onPressed: () {
                                    setState(() {
                                      if (pwd.isNotEmpty) {
                                        pwd = pwd.substring(0, pwd.length - 1);
                                      }
                                    });
                                  },
                                  child: Text(
                                    '删除',
                                    style: StylesUtils.customTextStyle(
                                        color: ColorsUtils.color333, fontSize: Sizes.default18),
                                  )),
                            )),
                          ],
                        ),
                      ),
                    ],
                  ),
                ),
              ),
            );
          },
        );
      },
    );
  }

  void changePwd(String text) {
    /// 需要关闭跳转
    pwd += text;
    if (pwd.length == 6) {
      Future.delayed(const Duration(milliseconds: 50), () {
        Navigator.of(context).pop();
        pwd = '';
        Get.toNamed(RouteGet.financeWithdrawalResult);
      });
    }
  }
}

///  继承CustomPainter ，来实现自定义图形绘制
class MyCustom extends CustomPainter {
  ///  传入的密码，通过其长度来绘制圆点
  final String pwdLength;

  MyCustom({required this.pwdLength});

  ///  此处Sizes是指使用该类的父布局大小
  @override
  void paint(Canvas canvas, Size size) {
    /// 密码画笔
    Paint mPwdPaint;
    Paint mRectPaint;

    /// 初始化密码画笔
    mPwdPaint = Paint();
    mPwdPaint.color = Colors.black;

//   mPwdPaint.setAntiAlias(true);
    /// 初始化密码框
    mRectPaint = Paint();
    mRectPaint.color = const Color(0xff707070);

    ///  圆角矩形的绘制
    RRect r = RRect.fromLTRBR(0.0, 0.0, size.width, size.height, Radius.circular(size.height / 12));

    ///  画笔的风格
    mRectPaint.style = PaintingStyle.stroke;
    canvas.drawRRect(r, mRectPaint);

    ///  将其分成六个 格子（六位支付密码）
    var per = size.width / 6.0;
    var offsetX = per;
    while (offsetX < size.width) {
      canvas.drawLine(Offset(offsetX, 0.0), Offset(offsetX, size.height), mRectPaint);
      offsetX += per;
    }

    ///  画实心圆
    var half = per / 2;
    var radio = per / 8;
    mPwdPaint.style = PaintingStyle.fill;

    ///  当前有几位密码，画几个实心圆
    for (int i = 0; i < pwdLength.length && i < 6; i++) {
      canvas.drawArc(
          Rect.fromLTRB(i * per + half - radio, size.height / 2 - radio, i * per + half + radio,
              size.height / 2 + radio),
          0.0,
          2 * pi,
          true,
          mPwdPaint);
    }
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return true;
  }
}
